<template>
  <div>
    <div v-for="(sub, i) in node.subclass" class="custom-control custom-control-inline mt-1 mb-1 sc" :key="sub">
      <div class="input-group-append">
        <span class="input-group-text subLabel">{{sub}}</span>
      </div>
      <input v-if="uiType=='arrayVal'" type="number" class="form-control val" v-model="values[i]" :min="node.options[0]" :max="node.options[1]">
      <input v-else type="text" class="form-control val" v-model="values[i]">
    </div>
  </div>
</template>

<script>
import * as Util from '../js/util';

export default {
  name: 'UIArrayValue',
  props: {
    'value': {},
    'node': {},
    'uiType': ''
  },
  data () {
    return {
      values: Util.memset(this.node.subclass.length, ''),
    }
  },
  mounted: function () {
    this.values = this.value;
  },
  watch: {
    'value': function () {
      this.values = this.value;
    }
  }
}
</script>

<style scoped>
  .val { height: 25px; font-size: 14px; color: #666; width: 65px; border-radius: .05rem; }
  .subLabel { padding: 1px .75rem; line-height: 1em; font-size: 14px; border-radius: .05rem; }
  .sc { padding-left: 2px; padding-right: 2px; margin-right: 4px }
</style>
